<template>
	<view class="cart-wrap page-bg">
		<none v-if="cartData.length<=0">
			<view class="none-btn" @click="link('/pages/shop/shopCate')">去商城逛逛</view>
		</none>
		<block v-else>
			<view class="cart-count">
				<text class="count">共{{allGoods.allGoodsNum}}件商品</text>
				<text class="count" v-if="btnDel === 0" @click="editCart(1)">编辑</text>
				<text class="count" v-else @click="editCart(0)">完成</text>
			</view>
			<view class="cart-con">
				<view class="order-group" v-for="(shop, shopIndex) in cartData" :key='shop.id'>
					<view class="order-shop">
						<view :class="shop.isSelect?'icon-select icon-select__on':'icon-select'" @click="selectShop(shopIndex)"></view>
						<view class="order-shop-name link">{{shop.shopTitle}}</view>
					</view>

					<view class="goods-item" v-for="(goods, goodsIndex) in shop.goods" :key='goods.id'>
						<view :class="goods.isSelect?'icon-select icon-select__on':'icon-select'" @click="selectShopGoods(shopIndex,goodsIndex)"></view>
						<image class="goods-img" :src="goods.img"></image>
						<view class="goods-info">
							<view class="goods-title">{{goods.title}}</view>
							<view class="goods-sepc">{{goods.goodsSkuName}}</view>
							<view class="goods-price">
								<text class="price yuan">{{goods.price | formatMoney}}</text>
								<view class="shop-num">
									<text class="op-num" @click="setGoodsNum('reduce', shopIndex, goodsIndex)">-</text>
									<text class="input-num" type="text">{{goods.num}}</text>
									<text class="op-num" @click="setGoodsNum('add', shopIndex, goodsIndex)">+</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="select-all">
				<view :class="isSelectAll?'icon-select icon-select__on':'icon-select'" @click="selectAllGoods"></view>
				<view class="select-text">全选</view>
				<view class="all-price" v-if="btnDel===0">合计: <text class="price yuan">{{allGoods.allGoodsPrice | formatMoney}}</text></view>
				<view class="all-price" v-else></view>
				<block v-if="btnDel === 0">
					<view v-if="opStatus === 0" class="select-buy select-buy-defalt">去结算({{selectGoodsNum}})</view>
					<view @click="placeOrder" v-if="opStatus === 1" class="select-buy select-buy-defalt select-buy-active ">去结算({{selectGoodsNum}})</view>
				</block>
				<view v-else class="select-buy select-buy-defalt aslect-buy-del" @click="delCarData">删除({{selectGoodsNum}})</view>
			</view>
		</block>
		<!-- #ifdef H5 -->
		<view class="footer-block"></view>
		<!-- #endif -->
		<view class="footer-block"></view>
	</view>
</template>

<script>
	import noneIcon from '../../static/common/icon_none.png'
	import none from '../../components/none.vue'
	import common from '../../utils/common.js'
	import {
		apiShop as api
	} from '../../utils/apiShop.js'
	export default {
		data() {
			return {
				noneIcon: noneIcon,
				opStatus: 0, //0未选中商品，灰色结算按钮， 1计算， 2完成
				btnDel: 0, // 编辑删除状态控制
				isSelectAll: false, // 是否选择全部商品
				cartData: [], // 购物车数据
			}
		},
		onLoad() {
			if (!this.$isLogin()) {
				this.$login.uniLogin()
			}else{
				if(!this.$isBindPhone()) {
					this.$link('/pages/login/login')
				}
			}
		},
		onShow() {
			this.getItems()
		},
		methods: {
			link(url) {
				if(url === '/pages/shop/shopCate') {
					uni.switchTab({
						url
					})
					return
				}
				this.$link(url)
			},

			// 获取购车数据
			getItems() {
				api.getCommodityFromCart({}, (res) => {
					let items = res || []
					// 映射购物车数据
					let temp = []
					items.map(item => {
						let tempObj = {
							shopId: item.id,
							shopTitle: item.shopName,
							isSelect: false,
						}
						let tempChild = []
						item.shoppingCartList.map(subItem => {
							tempChild.push({
								id: subItem.id,
								img: subItem.imgUrl,
								title: subItem.comTitle,
								sepc: subItem.skuName,
								price: subItem.price,
								num: subItem.qty,
								isSelect: false,
								comSkuId: subItem.comSkuId,
								goodsSkuName: subItem.skuName,
								goodsSkuPrice: subItem.actualPrice,
								goodsNum: subItem.qty,
								goodsFreight: subItem.freight,
								cartId: subItem.id,
								goodsId: subItem.spuId,
							})
						})
						temp.push({...tempObj, goods: tempChild})
					})
					this.cartData = temp
				})
			},
			
			editCart(status) {
				this.btnDel = status
			},

			// 设置商品数量
			setGoodsNum(type, shopIndex, goodsIndex) {
				let currentGoodsNum = this.cartData[shopIndex]['goods'][goodsIndex]['num']
				if (type === 'add') {
					currentGoodsNum += 1
				} else {
					if (currentGoodsNum > 1) {
						currentGoodsNum -= 1
					}
				}
				let currentGoods = this.cartData[shopIndex]['goods'][goodsIndex]
			    let id = currentGoods.cartId
				if(currentGoodsNum >= 1) {
					api.editShoppingCartItem({qty: currentGoodsNum, id }, res => {
						console.log(res);
					})
				}
				this.cartData[shopIndex]['goods'][goodsIndex]['num'] = currentGoodsNum
			},

			// 选中店铺商品
			selectShop(shopIndex) {
				let currentShop = this.cartData[shopIndex]
				currentShop.isSelect = !currentShop.isSelect
				if (currentShop.isSelect) {
					currentShop.goods.map(item => item.isSelect = true)
				} else {
					currentShop.goods.map(item => item.isSelect = false)
				}
			},

			// 选择单个商品, 如果该店铺的所有商品都选中，则店铺选中
			selectShopGoods(shopIndex, goodsIndex) {
				let currentGoods = this.cartData[shopIndex]['goods'][goodsIndex]
				this.cartData[shopIndex]['goods'][goodsIndex]['isSelect'] = !currentGoods.isSelect
				let currentShop = this.cartData[shopIndex]
				currentShop.isSelect = true
				currentShop.goods.map(item => {
					if (!item.isSelect) {
						currentShop.isSelect = false
					}
				})
				this.cartData[shopIndex] = currentShop
			},

			// 选择全部商品，店铺和单个商品的选择状态都需要变换
			selectAllGoods() {
				this.isSelectAll = !this.isSelectAll
				let temp = this.cartData
				if (this.isSelectAll) {
					temp.map(shop => {
						shop.isSelect = true
						shop.goods.map(item => {
							item.isSelect = true
						})
					})
				} else {
					temp.map(shop => {
						shop.isSelect = false
						shop.goods.map(item => {
							item.isSelect = false
						})
					})
				}
				if(this.isSelectAll) {
					this.opStatus = 1
				}else{
					this.opStatus = 0
				}
				
				this.cartData = temp
			},

			// 购物车删除操作
			delCarData() {
				let carData = this.cartData
				let shopId = ''
				let comSkuId = ''
				this.$showModal('温馨提示', '确定要删除勾选的商品？', () => {
					carData.map((shop, shopIndex) => {
						// 选中店铺, 删除店铺
						/* if (shop.isSelect) {
							carData.splice(shopIndex, 1)
							shopId = shop.shopId
						} */
						// 选中商品， 删除商品
						shop.goods.map((item, goodsIndex) => {
							if (item.isSelect) {
								shop.goods.splice(goodsIndex, 1)
								shopId = shop.shopId
								comSkuId = item.comSkuId
							}
						})
					})
					if(!shopId || !comSkuId) { this.$showToast('请选择需要删除的商品~'); return }
					api.removeFromCart({shopId, comSkuId },(res) => {
						this.$showToast('该商品已从购物车移除~')
					}) 
					this.cartData = carData
				});
			},
			
			
			// 结算按钮
			placeOrder() { 
				let cartData = this.cartData || []
				console.log(this.cartData);
				let temp = []	
				let cartIdArr = []
				cartData.map(item => {
					let tempObj = {
						shopId: item.shopId,
						shopName: item.shopTitle,
						shopPrice: 0,
						shopNum: 0,
						shopFreight: 0
					}
					let tempChild = []
					item.goods.map(subItem => {
						if(subItem.isSelect){
							tempChild.push({
								cartId: subItem.cartId,
								goodsId: subItem.spuId,
								goodsName: subItem.title,
								goodsImg: subItem.img,
								goodsSkuId: subItem.goodsSkuId,
								goodsSkuName: subItem.goodsSkuName,
								goodsSkuPrice: subItem.goodsSkuPrice,
								goodsNum: subItem.num,
								goodsFreight: subItem.goodsFreight
							})
							console.log(subItem);
							console.log(subItem.goodsSkuPrice,subItem.goodsNum, subItem.goodsSkuPrice * subItem.goodsNum);
							tempObj.shopPrice += subItem.goodsSkuPrice * subItem.num
							tempObj.shopNum += subItem.num
							tempObj.shopFreight += subItem.goodsFreight
							cartIdArr.push(subItem.cartId)
						}
					})
					if(tempChild.length > 0) {
						temp.push({...tempObj, goods: tempChild}) 
					}
				})
				console.log(temp);
				//7014.3
				//return
				common.setStorage('cartInfo', temp)
				common.setStorage('cartIdArr', cartIdArr)
				this.$link('/pages/mine/cartConfirm')
			}
		},
		computed: {
			// 计算所有商品数量和所有商品价格
			allGoods: function() {
				let allGoods = {}
				let allGoodsNum = 0
				let allGoodsPrice = 0
				this.cartData.map(shop => {
					allGoodsNum += shop.goods.length
					shop.goods.map(item => {
						if (item.isSelect) {
							allGoodsPrice += item.price * item.num
						}
					})
				})
				return allGoods = {
					allGoodsNum,
					allGoodsPrice
				}
			},
			// 选中的商品数量
			selectGoodsNum: function() {
				let selectGoodsNum = 0
				this.cartData.map(shop => {
					shop.goods.map(item => {
						if (item.isSelect) {
							selectGoodsNum += 1
						}
					})
				})
				// 判断选中商品数是都等于所有商品数
				this.isSelectAll = selectGoodsNum === this.allGoods.allGoodsNum ? true : false
				if (selectGoodsNum > 0) {
					this.opStatus = 1
				}
				return selectGoodsNum
			}
		},
		components: {
			none
		}
	}
</script>

<style scoped lang="less">
	@import url('../../app.less');

	.cart-count {
		width: 100%;
		.flex-base;
		background-color: @font-orange-color;
		color: @f;
		height: 90upx;
		line-height: 90upx;
		padding: 0 30upx;
		box-sizing: border-box;
	}

	.cart-con {
		padding: 20upx 30upx;
		box-sizing: border-box;
	}

	.order-group {
		background-color: @f;
		.br;
		.content-20;
		margin-bottom: 20upx;
	}

	.order-group:last-child {
		margin-bottom: 0;
	}

	.icon-select {
		width: 34upx;
		height: 34upx;
		margin-right: 20upx;
	}

	.order-shop {
		width: 100%;
		margin-bottom: 20upx;
		.flex-base;
		justify-content: flex-start;

		.order-shop-name {
			.flex-base;
			.f24;

			&::before {
				content: '';
				background: url() no-repeat left center;
				background-size: 22upx 22upx;
				display: block;
				width: 22upx;
				height: 24upx;
				padding-right: 10upx;
			}
		}
	}

	.goods-item {
		.flex-base;
		padding: 0;
		padding-bottom: 30upx;
		border-bottom: 1px solid @border-color;
		margin-bottom: 30upx;

		.goods-img {
			width: 150upx;
			height: 150upx;
			.br;
			margin-right: 30upx;
			flex-shrink: 0;
		}

		.goods-info {
			flex-grow: 2;
		}

		.goods-title {
			.f26;
			width: 100%;
			max-height: 60upx;
			line-height: 30upx;
			overflow: hidden;
		}

		.goods-sepc {
			.f24;
			color: @font-dark-color;
			padding: 10upx 0;
		}

		.goods-price {
			margin-top: 0;

			.price {
				display: block;
			}

			width: 100%;
			.flex-base;
			justify-content: space-between;

			.input-num {
				.f24;
				width: 25px;
				height: 25px;
				border-left: 1px solid #ededed;
				border-right: 1px solid #ededed;
			}
		}

		.shop-num {
			border-radius: 50upx;
			border: 1px solid @border-color;
			text-align: center;
			line-height: 50upx;
			.flex-base;
			justify-content: flex-end;
			box-sizing: border-box;

			.op-num {
				width: 50upx;
				height: 100%;
				font-size: 50upx;
			}

			.num {
				width: 50upx;
				height: 50upx;
				border-left: 1px solid @border-color;
				border-right: 1px solid @border-color;
			}
		}

	}

	.goods-item:last-child {
		margin-bottom: 0;
		border-bottom: none;
		padding-bottom: 0;
	}

	.should-price {
		padding-top: 30upx;
		border-top: 1px solid @border-color;
		margin-bottom: 30upx;
		text-align: right;
		.f24;

		.price {
			.fw;
			.f32;
			color: @theme-color;
		}
	}

	.select-all {
		width: 100%;
		padding: 0 30upx;
		height: 100upx;
		line-height: 100upx;
		box-sizing: border-box;
		background: @f;
		position: fixed;
		left: 0;
		bottom: 0;
		/* #ifdef H5 */
		bottom: 100rpx;
		/* #endif */
		width: 100%;
		.flex-base;
		.f30;

		.all-price {
			flex-grow: 2;
			text-align: center;
		}

		.select-buy-defalt {
			height: 60upx;
			background: @font-dark-color;
			text-align: center;
			line-height: 60upx;
			color: @f;
			padding: 0 20upx;
			border-radius: 60upx;
		}

		.select-buy-active {
			background: @font-orange-color;
		}

		.aslect-buy-del {
			background: @theme-color;
		}
	}

	.none-btn {
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		padding: 0 20upx;
		border-radius: 60upx;
		color: @font-orange-color;
		border: 1px solid @font-orange-color;
		margin-top: 30upx;
	}
</style>
